<template>
  <div>
    <router-link to="/index/menuList/add">
      <el-button type="primary">
          <i class="el-icon-circle-plus-outline"></i>添加
      </el-button>
    </router-link>
    <el-table
      :data="tableData"
      style="width: 100%"
      row-key="id"
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
      <el-table-column
        prop="id"
        label="ID"
        width="180">
      </el-table-column>
      <el-table-column
        prop="title"
        label="标题"
        width="180">
      </el-table-column>
      <el-table-column
        prop="type"
        label="类型"
        width="180">
        <!-- 这里是作用域插槽，要用子组件中的数据，都放在scope.row中，所以要加template -->
        <template slot-scope="scope">
          <!-- el-tag标签中才是要显示的内容 -->
          <el-tag type="success" v-show="scope.row.type == 1">目录</el-tag>
          <el-tag type="danger" v-show="scope.row.type == 2">菜单</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="icon"
        label="图标"
        width="180">
        <template slot-scope="scope">
          <!-- element ui的icon组件就是i标签，通过class来显示不同的标签样式 -->
          <i :class="scope.row.icon" v-show="scope.row.type == 1"></i>
        </template>
      </el-table-column>
      <el-table-column
        prop="url"
        label="地址"
        width="180">
      </el-table-column>
      <el-table-column
        prop="status"
        label="状态">
        <template slot-scope="scope">
          <el-tag type="success" v-if="scope.row.status">已启用</el-tag>
          <el-tag type="danger" v-else>已禁用</el-tag>  
        </template>
      </el-table-column>
      <el-table-column
        label="操作">
        <!-- 点击按钮要传id，所以需要数据，又是一个作用域插槽，数据都在scope.row里面 -->
        <template slot-scope="scope">
          <el-button type="primary" size="mini" icon="el-icon-edit" circle @click="edit(scope.row.id)"></el-button>
          <el-button type="danger" size="mini" icon="el-icon-delete" circle @click="del(scope.row.id)"></el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import {getTableData1, delMenu} from '../../http'
export default {
  data() {
    return {
      // 表格中的数据
      tableData: []
    }
  },
  created() {
    // 请求表格中的数据
    this.getTableData()
  },
  methods: {
    // 获取数据
    async getTableData() {
      this.tableData = await getTableData1();
      // let _this = this;
      // this.$axios('/menulist', {
      //   params: {istree: 1}
      // })
      //   .then(res => {
      //     // 获取数据后，更新data中的数据
      //     _this.tableData = res.data.list;
      //   })
      //   .catch(err => {
      //     console.log(err);
      //   })
    },
    // 跳转到详情页
    edit(id) {
      // 动态路由
      this.$router.push('/index/menuList/'+id);
    },
    // 删除
    async del(id) {
      let res;
      res = await delMenu(id);
      if(res) {
        this.tableData = await getTableData1();
      }
      // this.$axios.post('menudelete', {
      //   id: id
      // })
      //   .then(res => {
      //     console.log(res);
      //     // 更新页面数据
      //     this.getTableData()
      //   })
      //   .catch(err => {
      //     console.log(err);
      //   })
    }
  },
}
</script>
<style lang="">
  
</style>